Vue.directive('watermark', (el, binding) => {
    const addWaterMarker = (text, time, el) => {
        var canvas = document.createElement('canvas');
        canvas.width = 400;
        canvas.height = 200;
        var cans = canvas.getContext('2d');
        cans.rotate((-20 * Math.PI) / 180); // 旋转弧度
        cans.font = '16px Microsoft JhengHei'; // 字体
        cans.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 字体填充颜色
        cans.textAlign = 'left'; // 对齐方式
        cans.textBaseline = 'Middle'; // 基线
        cans.fillText(text, canvas.width / 3, canvas.height / 2); // 被填充的文本
        cans.fillText(formatDate(time), canvas.width / 3, 130); // 被填充的文本
        el.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`; // 插入背景图
    };
    const { text, time } = binding.value;
    addWaterMarker(text, time, el);
});
